<template>
  <div class="loginContainer">
    <el-form ref="LoginForm" :model="LoginForm" :rules="rules" v-loading="loading">
      <h3 class="loginTitle">互联网医疗服务后台管理</h3>
      <!--prop为校验的字段-->
      <el-form-item prop="username">
        <!--auto-complete为自动补全-->
        <el-input type="text" auto-complete="true" v-model="LoginForm.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" autocomplete="false" v-model="LoginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <el-button class="login_button" type="primary" @click="submitLogin()">登录</el-button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data () {
    return {
      // 表单数据对象
      LoginForm: {
        username: '',
        password: '',
      },
      // 校验规则
      rules: {
        // 校验用户名不能为空
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        // 校验密码不能为空和在6-32之间
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 100, message: '长度在 6 到 32 个字符', trigger: 'blur' }
        ],
      },
      //是否展示正在登录框
      loading: false
    }
  },
  methods: {
    //更新验证码
    // updateCaptchaUrl () {
    //   this.captchaUrl = '/captchaUrl?time=' + new Date();
    // },
    //登录
    submitLogin () {
      // 校验规则回调
      this.$refs.LoginForm.validate((valid) => {
        if (valid) {
          // 打开加载界面
          this.$axios.get('/login/',{
              params:{
                username:this.LoginForm.username,
                password:this.LoginForm.password
              }
            }).then(res => {
            if(res.data.code == 200){
              //登录成功，存储token
              console.log(res);
              this.$message.success("登录成功！");
              localStorage.setItem('admin', JSON.stringify(res.data.data))
              localStorage.setItem("Authorization",res.headers['authorization']);
              localStorage.setItem("refreshtoken",res.headers['refreshtoken']);
              this.$router.push('/index/home');
            }
            if(res.data.code == 401){
              this.$message.error("登录失败，密码错误！账号admin，密码123123");
              return false;
            }
            if(res.data.code == 402){
              this.$message.error("登录失败，用户不存在！账号admin，密码123123");
              return false;
            }
          })
        } else {
          this.$message.error("校验失败,请输入所有字段！账号admin，密码123123");
          return false;
        }
      });
    }
  }
}
</script>

<style>
.loginContainer {
  /*圆角的边框*/
  border-radius: 15px;
  /*设置元素的背景延伸到内边距*/
  background-clip: padding-box;
  /*外边距*/
  margin: 180px auto;
  /*宽*/
  width: 350px;
  /*内边距*/
  padding: 15px 35px 15px 35px;
  /*背景颜色*/
  background-color: #ffffff;
  /*设置边框*/
  border: 1px solid #eaeaea;
  /*添加阴影效果*/
  box-shadow: 0 0 25px #3d3d37;
}
.loginTitle {
  margin: 16px auto 40px auto;
  font-size: 25px;
  /*文字居中*/
  text-align: center;
}
.loginCode {
  width: 250px;
  /*右外边距*/
  margin-right: 5px;
}
.login_button {
  width: 350px;
}
.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.el-form-item__content {
  /*布局方式*/
  display: flex;
  /*元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同*/
  align-items: center;
}
</style>